<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title id="divTitle"> 批量添加书籍 </title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />

  <style type="text/css">
    *, body {
      margin: 0px;
      font-family: '微软雅黑';
    }
  </style>
  <script src="~/js/generic.js"></script>
  <link rel="stylesheet" type="text/css" href="~/Content/easyui.css" />
  <link rel="stylesheet" type="text/css" href="~/Content/icon.css" />
  <script type="text/javascript" src="~/js/EasyUI/jquery.form.js"></script>

  <script type="text/javascript" src="~/js/EasyUI/jquery.min.js"></script>
  <script type="text/javascript" src="~/js/EasyUI/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="~/js/EasyUI/jquery.iframe-transport.js"></script>
  <script type="text/javascript" src="~/js/EasyUI/jquery.fileupload.js"></script>
  <script type="text/javascript" src="~/js/EasyUI/jquery.fileupload-process.js"></script>
  <script type="text/javascript" src="~/js/EasyUI/jquery.fileupload-validate.js"></script>
  <script type="text/javascript" src="~/js/EasyUI/jquery.fileupload-ui.js"></script>

  <script type="text/javascript">
    $(function () {
      //=================================
      $('#fileupload').fileupload({
        url: "/Book/UploadFiles",
        dataType: 'json',
        replaceFileInput: false,//显示已选择文件文件名(必须)
        progressall: function (e, data) {
          var progress = parseInt(data.loaded / data.total * 100, 10);
          $('#progress .bar').css('width', progress + '%');
        },
        add: function (e, data) {
          //判断文件类型，此例限制为：Excel文件
          var fileType = data.files[0].name.split('.').pop();
          var acceptFileTypes = /xls|xlsx$/i;
          if (!acceptFileTypes.test(fileType)) {
            $("#startBtn").hide();//隐藏上传按钮
            alert("不支持的文件类型，仅支持EXCEL文件");
            return;
          }
          $("#startBtn").show();//显示上传按钮
          //点击上传按钮开始上传
          data.context = $('#startBtn').click(function () {
            data.context = $('<p/>').text('Uploading...').replaceAll($(this));
            data.submit();
          });
        },
        done: function (e, data) {
          data.context = $('<p/>').text("文件上传成功!").replaceAll($(this));

          $("#tab1").empty();
          $('#tab1').append("<tr><th>书名</th><th>作者</th><th>出版社</th><th>版次</th><th>出版时间</th><th>isbn</th><th>医家</th></tr>");
          $.ajax({
            type: "GET",
            url: "/Book/ReadFile",
            data: {},
            dataType: "json",
            success: function (result) {
              var html = '';
              for (var i = 0; i < result.length; i++) {
                html += '<tr>';
                html += '<td>' + result[i].bookName + '</td>';
                html += '<td>' + result[i].author + '</td>';
                html += '<td>' + result[i].publisher + '</td>';
                html += '<td>' + result[i].edition + '</td>';
                html += '<td>' + result[i].editionTime + '</td>';
                html += '<td>' + result[i].isbn + '</td>';
                html += '<td>' + result[i].medicalDoctor + '</td>';
                html += '</tr>';
              }
              $('#tab1').append(html);
            }
          });

        },
        change: function (e, data) {
          if (data.files.length > 1) {
            $("#startBtn").hide();//隐藏上传按钮
            alert("只能选择1个文件");
            return false;
          }
        },
        drop: function (e, data) {
          if (data.files.length > 1) {
            $("#startBtn").hide();//隐藏上传按钮
            alert("只能选择1个文件");
            return false;
          }
        },
      });
    });

    function saveInfo() {
      $.post('/Book/BatchSubmit', { }, function (result) {
        if (result.status == 0) {
          alert(result.msg);
          location.href = "/Book/List";
        } else {
          alert(result.msg);
        }
      },'json');
    }
  </script>
</head>

<body>

@Html.Partial("top")
<form id="filePost" method="post" enctype="multipart/form-data" onsubmit="return false;">
  <table class="maintable">
    <tr>
      @Html.Partial("Menu")
      <td class="rightmaintd" valign="top">

        <div style="width:920px;margin:10px auto;"> <a href="/book/list">&lt;  返回</a> </div>
        <div style="margin-left:300px;margin-top:20px">
          <input id="fileupload" type="file" name="multiFiles" multiple />
          <input type="button" id="startBtn" value="上传Excel" class="denglubtn">
          <a target="_blank" data-icon="arrow-down" class="btn btn-green" href="~/Template/book.xlsx">下载模板</a>
        </div>
        <div style="margin-left:300px;margin-top:20px">
          <input type="button" value="提&nbsp;&nbsp;交" class="denglubtn" onclick="saveInfo();">
        </div>
        <div id="progress" style="margin-left:300px;margin-top:20px">
          <div class="progressbar" style="width:0%"></div>
        </div>
        <br />
        <table border="1" id="tab1" style="margin-left:300px"></table>
        <table class="logintable" cellpadding="8" style="margin-top:20px;"></table>
      </td>
    </tr>
  </table>
</form>
@Html.Partial("bottom")

</body>
</html>